<template>
    <div class="property">
        <van-nav-bar
        title="生活缴费"
        @click-left="goBack"
        left-arrow
        />
        <h2><i></i>水费</h2>
        <van-cell-group>
            <van-field 
            v-model="amount"
            clearable
            type="number"
            label="金额"
            placeholder="请输入金额" />
        </van-cell-group>
        <div class="btn">
            <van-button block type="primary">缴费</van-button>
        </div>
        <div class="none">
            <van-button size="small" type="default">无云闪付</van-button>
        </div>
        <div class="list">
            <h3>缴费记录</h3>
            <ul>
                <li v-for="(record,index) in records" :key="index">{{record.time}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'PropertyPayment',
        data(){
            return {
                amount: '',
                isBlock: 'true',
                records:[
                    {
                        time: '2019年8月1日',
                        amount: '100元'
                    },
                    {
                        time: '2019年4月1日',
                        amount: '100元'
                    },
                    {
                        time: '2019年1月1日',
                        amount: '100元'
                    },
                    {
                        time: '2018年7月1日',
                        amount: '100元'
                    },
                    {
                        time: '2018年4月1日',
                        amount: '100元'
                    },
                    {
                        time: '2018年1月1日',
                        amount: '100元'
                    }
                ]
            }
        },
        methods:{
            goBack(){
                window.history.length > 1 ? this.$router.go(-1) : this.$router.push('./')
            },
        }
    }
</script>
<style lang="scss" scope>
    .property{
        h2{
            line-height:0.8rem;
            padding:0 0.3rem;
            font-size:0.32rem;
            font-weight:normal;
            & > i{
                display:inline-block;
                font-size:0.4rem;
                position:relative;
                top:0.08rem;
                margin-right:0.1rem;
                width:0.4rem;
                height:0.4rem;
                background:url(../assets/img/water.png) no-repeat center center;
                background-size:cover;
            }
        }
        .van-cell-group{
            .van-field{
                .van-field__label{
                    width:1rem;
                }
            }
        }
        .btn{
            margin-top:0.4rem;
            padding:0 0.2rem;
            .van-button{
                font-size:0.36rem;
            }
        }
        .none{
            padding:0 0.2rem;
            text-align:right;
            .van-button{border:0 none;}
        }
        .list{
            padding:0 0.2rem;
            h3{
                font-size:0.28rem;
                line-height:0.8rem;
            }
            ul > li{
                line-height:0.6rem;
            }
        }
    }
</style>